<template>
    <div class="webgl-container">
        <canvas ref="canvas" class="canvas"></canvas>
        <div v-if="webGLError" class="error-message">
            {{ webGLError }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import WebGL from "three/addons/capabilities/WebGL.js";

const canvas = ref<HTMLCanvasElement | null>(null);
const webGLError = ref<string | null>(null);

onMounted(() => {
    if (!WebGL.isWebGL2Available()) {
        const errorElement = WebGL.getWebGL2ErrorMessage();
        webGLError.value = errorElement.textContent || "WebGL not supported";
    } else {
        console.log("WebGL is available!");
        // Initialize Three.js here
        webGLError.value = "可以使用webgl"
    }
});
</script>

<style scoped>
.webgl-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.error-message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: #ffebee;
    color: #c62828;
}
</style>